<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/project_set.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script src="/js/common.js"></script>

<style>
.layui-form-label{
	text-align:left
}
.kb-form-container{
	padding-left:20px;
}
.layui-form-item .layui-inline{
	margin-right:0px
}
.kb-form-container .kb-row{
	margin-bottom: 20px;
}
.form-content{
margin-bottom: 50px;
}
.kb-nav-header {
    height: 20px;
    line-height: 20px;
}
.kb-nav-header > div {
    float: left;
}

.region-title {
    font-size: 12px;
    color: #666666;
}
.kb-nav-header i {
    vertical-align: middle;
    font-size: 12px;
    font-weight: bold;
    color: #2b88b5;
}
.form-content .title-text {
    color: #333;
    font-size: 12px;
}
.kb-nav-header .kb-nav-line {
    float: right;
    height: 100%;
    line-height: 12px;
    display: inline-block;
}
.kb-nav-header .kb-nav-line > div {
    height: 1px;
    background: #ddd;
    }
.kb-nav-header .pact-line > div {
   margin-top: 10px;
}
.region-input-box {
    margin-bottom: 20px;
    padding: 10px 0;
    border: 1px solid #e6e6e6;
}
.region-input-box li {
    padding: 10px 30px;
    position: relative;
    cursor: pointer;
}
.region-input-box .icon-close {
    position: absolute;
    color: #999999;
    top: 20px;
    right: 8px;
    cursor: pointer;
}
</style>
</head>
<body style="overflow-y:scroll">
<form class="layui-form" lay-filter="formEmployee">
	<input type="hidden" id="contractId" name="contractId" th:value="${contract.id}" />	
	<div class="kb-form-container">
		<div class="kb-row">
			<div class="kb-form-group kb-form-alone" style="font-size:16px;margin-bottom:10px;">
				合同终止后将不再有效，账单不会继续生成，请确认是否要终止
			</div>
		</div>
		<fieldset class="fieldset">
			<div class="form-content">
				<header class="kb-nav-header" style="margin-bottom:10px">
					<div class="region-title"><i class="layui-icon">&#xe643;</i><span class="title-text">账单处理</span></div>
					<div class="kb-nav-line pact-line" style="width:calc( 100% - 100px);">
						<div style="width:100%;"></div>
					</div>
				</header>
				<div class="nav-content-container layui-form-item">
					<div class="kb-row " style="padding-top:10px;" >
						 <input type="radio" name="delBillStatus" value="0" title="终止合同后删除所有合同相关账单">
				      	 <input type="radio" name="delBillStatus" value="1" title="不删除已生成的账单" checked>
					</div>
					<div>
						<ul class="region-input-box" id="zhangdan">
							<li>
								<div class="kb-row">
									<i class="layui-icon icon-close" onclick="delBill(this)">&#x1006;</i> 
									<div class="kb-row">
										<div class="layui-form-item">
										    <label class="layui-form-label">单价</label>
										    <div class="layui-input-block">
										      	<input type="text" name="price"  placeholder="" autocomplete="off" class="layui-input" th:value="'-'+${contract.deposit}">
										    </div>
										</div>
									</div> 
									<div class="kb-row">
										<div class="layui-form-item">
										    <label class="layui-form-label">说明</label>
										    <div class="layui-input-block">
										      	<textarea name="remark" placeholder="" class="layui-textarea">押金退还</textarea>
										    </div>
										</div>
									</div> 
								</div>
							</li>
						</ul>
						<div class="f-left">
							<button class="layui-btn layui-btn-radius layui-btn-normal" id="add_bill">
								<i class="layui-icon"></i>账款
							</button>
						</div>
					</div>
				</div>
			</div>
			<div class="form-content">
				<header class="kb-nav-header" style="margin-bottom:10px">
					<div class="region-title"><i class="layui-icon">&#xe643;</i><span class="title-text">终止日期</span></div>
					<div class="kb-nav-line pact-line" style="width:calc( 100% - 100px);">
						<div style="width:100%;"></div>
					</div>
				</header>
				<div class="nav-content-container">
					<div class="kb-row kb-form-66" style="padding-top:10px;">
						<input type="radio" name="endDateStatus" value="0" title="立刻终止" checked lay-filter="date">
				      <input type="radio" name="endDateStatus" value="1" title="选择日期" lay-filter="date">
				    <div class="layui-inline">
					  	<input type="text" class="layui-input" id="endDate" style="display:none;" name="realDate">
					</div>
					</div>
					<div>
					</div></div>
			</div>
			<div class="form-content">
				<header class="kb-nav-header" style="margin-bottom:10px">
					<div class="region-title"><i class="layui-icon">&#xe643;</i><span class="title-text">终止原因</span></div>
					<div class="kb-nav-line pact-line" style="width:calc( 100% - 100px);">
						<div style="width:100%;"></div>
					</div>
				</header>
				<div class="nav-content-container">
					<div class="kb-row kb-form-66" style="padding-top:10px;">
						  <input type="radio" name="reason" value="0" title="公司解散" checked>
					      <input type="radio" name="reason" value="1" title="临时过渡">
					      <input type="radio" name="reason" value="2" title="价格问题">
					      <input type="radio" name="reason" value="3" title="主动劝退">
					      <input type="radio" name="reason" value="4" title="转至其它场所">
					      <input type="radio" name="reason" value="5" title="更换分区">
					      <input type="radio" name="reason" value="6" title="合同修改">
					      <input type="radio" name="reason" value="7" title="输入错误">
					      <input type="radio" name="reason" value="8" title="其他原因">
				    	
					</div>
					<div >
				      <textarea name="endRemark" placeholder="备注" class="layui-textarea"></textarea>
				    </div>
					</div>
			</div>
		</fieldset>
		<div class="layui-form-item" >
			    <div class="f-right">
			      <button class="layui-btn layui-btn-normal btn-bg" lay-submit lay-filter="formEmployee" id="submit-btn">确定</button>
			      <a class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</a>
			    </div>
			</div>
	</div>

		</form>	
</body>
<script>
	$(function(){
		$("#add_bill").on("click",function(){
			var str ='<li><div class="kb-row"><i class="layui-icon icon-close" onclick="delBill(this)">&#x1006;</i>' 
				+'<div class="kb-row"><div class="layui-form-item"><label class="layui-form-label">单价</label><div class="layui-input-block">'
				+'<input type="text" name="price"  placeholder="" autocomplete="off" class="layui-input"></div></div></div> '
				+'<div class="kb-row"><div class="layui-form-item"><label class="layui-form-label">说明</label>'
				+'<div class="layui-input-block"><textarea name="remark" placeholder="" class="layui-textarea"></textarea>'
				+'</div></div></div></div></li>';
			$("#zhangdan").append(str);	
		})
	})
	layui.config({
	        base: '/js/plugin/layui-v2.3.0/layui/' //此处路径请自行处理, 可以使用绝对路径
	    }).extend({
	        formSelects: 'formSelects-v3'
	    }).use(['element',"layer","form",'formSelects'], function(){
			var layer=layui.layer,form = layui.form,laydate = layui.laydate;
			//form.render();
			 laydate.render({
			    elem: '#endDate'
			    ,value: new Date()
			  });
			 form.on('radio(date)', function(data){
				  if(data.value ==1){
					  $("#endDate").show();
				  }else{
					  $("#endDate").hide();
				  }
				});
			//监听提交
			  form.on('submit(formEmployee)', function(data){
				 var list = $("#zhangdan li");
				 var bills = "";
				 for(var i = 0;i< list.length;i++){
					 bills +=",{\"price\":"+$(list[i]).find("input[name='price']").val()+",\"remark\":\""+$(list[i]).find("textarea[name='remark']").val()+"\"}";
				 }
				 if(bills !=""){
					 bills = "["+bills.substring(1)+"]";
					 data.field['bills'] = bills;
				 }
				 console.log(data);
				   $.post("/app/contractInfo/endContract", data.field, function(result) {
						window.parent.layer.msg(result.msg);
						closeLayer();
					}, 'json'); 
					return false;
			  });
			
		});
 function delBill(obj){
	 $(obj).parent().parent().remove();
 }
 
</script>
</html>